<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<div>
				<h2>人员列表</h2>
				<ul v-for="p in persons" :key="p.id">
					<li>{{p.name}}-{{ p.age }}- {{ p.sex }}</li>
				</ul>
			</div>
			<div>
				<!--v-model双向绑定-->
				<input type="text" placeholder="请输入名字进行过滤" v-model="keyword" />
				<h2>人员列表过滤结果</h2>
				<ul v-for="p in filterPersons" :key="p.id">
					<li>{{p.name}}-{{ p.age }}- {{ p.sex }}</li>
				</ul>
			</div>
		</div>

		<script type="text/javascript">
			let str = 'Hello'
			console.log(str.indexOf(''))
			const vm = new Vue({
				el: "#root",
				data: {
					// 所有数据
					persons:[
						{id: "001", name:'周冬雨', age:20, sex:'女'},
						{id: "002", name:'马冬梅', age:19, sex:'女'},
						{id: "003", name:'周杰伦', age:21, sex:'男'},
						{id: "004", name:'温兆伦', age:22, sex: '男'}
					],
					// 关键字
					keyword: '',
					// 过滤出来的数据
					filterPersons: []
				},
				watch: {
					keyword:{
						immediate: true,
						handler(newValue){
							console.log(newValue)
							// indexOf('')是0而不是-1
							// 所有字符串都包含空字符串
							this.filterPersons = this.persons.filter(p => p.name.indexOf(newValue) !== -1);
						}
					}
				}
			})
		</script>
	</body>
</html>